<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left sec-title">
        <el-icon
          style="vertical-align: middle; display: unset; cursor: pointer"
          @click="backList()"
          ><Back
        /></el-icon>
        <span>{{ route.name }}</span>
      </div>
    </div>
    <div class="ci_content" style="margin: 12px 16px">
      <el-form
        label-position="right"
        ref="addExistingFormRef"
        label-width="150px"
        :model="addExistingForm"
        :rules="rules"
      >
        <el-form-item label="存证名称：" prop="evidenceName">
          <el-input
            style="width: 3rem"
            v-model.trim="addExistingForm.evidenceName"
            placeholder="请输入存证名称(50个字符以内)"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否加密：" prop="useEncrypt">
          <el-radio-group
            v-model="addExistingForm.useEncrypt"
            placeholder="请选择存证类型"
          >
            <el-radio label="0" size="large">不加密</el-radio>
            <el-radio label="1" size="large">加密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="存证数据：" prop="evidenceData">
          <el-input
            style="width: 3rem"
            type="textarea"
            v-model.trim="addExistingForm.evidenceData"
            placeholder="请输入存证数据,为json格式"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="isLoading"
            @click.prevent="inviteMember"
            type="primary"
            >确定</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { createEvidenceDataFile } from "@/api/existingEvidence";
import { useRouter, useRoute } from "vue-router";
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
const router = useRouter();
const route = useRoute();
const backList = () => {
  router.go(-1);
};
const addExistingFormRef = ref("addExistingForm");
const addExistingForm = reactive({
  evidenceName: "",
  useEncrypt: "0",
  evidenceData: "",
});
const isLoading = ref(false);
/** 表单JSON验证 */
const checkJson = (rule, value, callback) => {
  try {
    if (JSON.parse(value) && typeof JSON.parse(value) == "object") {
      callback();
    } else {
      callback(new Error("请输入JSON格式数据"));
    }
  } catch (error) {
    callback(new Error("请输入JSON格式数据"));
  }
};
const rules = reactive({
  useEncrypt: [{ required: true, message: "请选择是否使用加密存储" }],
  evidenceName: [
    {
      required: true,
      message: "请输入存证名称(50个字符以内)",
    },
    { max: 50, message: "请输入存证名称(50个字符以内)", trigger: "blur" },
  ],
  evidenceData: [
    {
      required: true,
      validator: checkJson,
      message: "请输入存证数据,为json格式",
    },
  ],
});

const inviteMember = () => {
  addExistingFormRef.value?.validate(async (valid) => {
    if (valid) {
      isLoading.value = true;
      let parmars = {
        evidenceData: addExistingForm.evidenceData,
        evidenceName: addExistingForm.evidenceName,
        useEncrypt: addExistingForm.useEncrypt,
      };
      const { success, msg } = await createEvidenceDataFile(parmars);
      if (success) {
        isLoading.value = false;
        ElMessage.success(msg || "创建成功");
        router.push({ path: "/ExistingEvidence/DataStorageCertificate" });
      } else {
        isLoading.value = false;
        ElMessage.error(msg || "创建失败,请稍后再试");
      }
    } else {
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/cindex.scss";
@import "../../assets/css/position";
:deep .el-upload-list--picture-card .el-upload-list__item-actions span + span {
  margin-left: 0.5em;
}
.add_icon {
  font-size: 18px;
  // margin-left: 10px;
  cursor: pointer;
  height: 100%;
}
.delete_icon {
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
  height: 100%;
}
</style>
